<template>
  <div>
    <Card shadow>
      <div class="table-operator">
        <ButtonGroup>
          <Button
            :disabled="$auth('jobEdit')?false:true"
            class="search-btn"
            type="primary"
            @click="handleModal()">
            <span>新增</span>
          </Button>
        </ButtonGroup>
      </div>
      <s-table :url="$apis.jobs.page" :columns="columns" :params="pageParams" ref="table">
        <template slot="status" slot-scope="{ row }">
          <Badge v-if="row.jobStatus==='NORMAL'" status="success" text="正常"/>
          <Badge v-else="" status="error" text="暂停"/>
        </template>
        <template slot="type" slot-scope="{ row }">
          <p v-if="row.cronExpression">cron表达式:{{ row.cronExpression }}</p>
          <p v-else="">调度时间:{{ row.startDate }} ~ {{ row.endDate }}</p>
        </template>
        <template slot="action" slot-scope="{ row }">
          <a style="margin-right: 5px;" :disabled="$auth('jobEdit')?false:true" @click="handleModal(row)">编辑</a>
          <span style="margin-right: 5px;">|</span>
          <a style="margin-right: 5px;" :disabled="$auth('jobEdit') && row.jobStatus !== 'PAUSED'?false:true" @click="handlePause(row)">暂停</a>
          <span style="margin-right: 5px;">|</span>
          <a style="margin-right: 5px;" :disabled="$auth('jobEdit') && row.jobStatus === 'PAUSED'?false:true" @click="handleResume(row)">恢复</a>
          <span style="margin-right: 5px;">|</span>
          <a style="margin-right: 5px;" :disabled="$auth('jobEdit')?false:true" @click="handleRemove(row)">删除</a>
        </template>
      </s-table>
    </Card>
    <job-modal ref="jobModal"></job-modal>
  </div>
</template>

<script>
import JobModal from './modal'

export default {
  name: 'TaskJob',
  components: { JobModal },
  data () {
    return {
      pageParams: {},
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '任务名称',
          key: 'jobName',
          width: 200
        },
        {
          title: '调度信息',
          width: 350,
          slot: 'type'
        },
        {
          title: '状态',
          key: 'jobStatus',
          slot: 'status'
        },
        {
          title: '任务描述',
          key: 'jobDescription'
        },
        {
          title: '操作',
          key: '',
          slot: 'action',
          fixed: 'right',
          width: 200
        }
      ]
    }
  },
  methods: {
    handleModal (data) {
      this.$refs['jobModal'].handleShow(data)
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.jobs.remove, { jobName: data.jobName }, this)
        .then(res => {
          this.handleSearch()
        })
    },
    handlePause (data) {
      this.$http.confirm(this.$apis.jobs.pause, { jobName: data.jobName }, { content: '确定暂停任务吗？' }, this)
        .then(res => {
          this.handleSearch()
        })
    },
    handleResume (data) {
      this.$http.confirm(this.$apis.jobs.resume, { jobName: data.jobName }, { content: '确定恢复任务吗？' }, this)
        .then(res => {
          this.handleSearch()
        })
    },
    handleSearch (page) {
      this.$refs['table'].search()
    }
  },
  mounted: function () {
  }
}
</script>
